<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryRef" :inline="true">
			<el-form-item label="一级分类名称" prop="categoryName">
				<el-input v-model="queryParams.categoryName" placeholder="请输入一级分类名称" clearable style="width: 300px" @keyup.enter="handleQuery" />
			</el-form-item>
			<!-- <el-form-item label="二级分类名称" prop="typeName">
				<el-input v-model="queryParams.typeName" placeholder="请输入二级分类名称" clearable style="width: 300px" @keyup.enter="handleQuery" />
			</el-form-item> -->
			<el-form-item>
				<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
				<el-button icon="Refresh" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" plain icon="Plus" @click="handleAdd(undefined)">新增</el-button>
			</el-col>
		</el-row>

		<el-table
			v-if="refreshTable"
			v-loading="loading"
			ref="tableRef"
			:data="dataList"
			row-key="id"
			lazy
			:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
			accordion
			@expand-change="expanRow"
		>
			<el-table-column prop="label" label="类型名称"
				><template #default="scope"
					><span style="cursor: pointer" @click="getTwo(scope.row)">{{ scope.row.label }}</span></template
				></el-table-column
			>
			<el-table-column prop="orderNum" label="排序" width="50" align="center"></el-table-column>
			<el-table-column label="创建时间" align="center" prop="createTime" width="200">
				<template #default="scope">
					<span>{{ parseTime(scope.row.createTime) }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width">
				<template #default="scope">
					<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
					<el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-if="scope.row.hasChildren">新增</el-button>
					<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dept:remove']">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 添加大类 -->
		<el-dialog title="一级分类" v-model="open" width="600px" append-to-body>
			<el-form ref="ref1" :model="form1" :rules="rules1" label-width="80px">
				<el-form-item prop="categoryName" label="分类名称">
					<el-input v-model="form1.categoryName" placeholder="请输入分类名称" />
				</el-form-item>
				<el-form-item prop="categorySort" label="排序号">
					<el-input-number :controls="false" :precision="0" :step="1" :min="0" v-model="form1.categorySort" placeholder="请输入排序号" />
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="submitForm">确 定</el-button>
					<el-button @click="cancel">取 消</el-button>
				</div>
			</template>
		</el-dialog>
		<!-- 添加小类 -->
		<el-dialog title="二级分类" v-model="open2" width="600px" append-to-body>
			<el-form ref="ref2" :model="form2" :rules="rules2" label-width="120px">
				<el-form-item prop="categoryName" label="一级分类名称">
					<el-input disabled v-model="form2.categoryName" />
				</el-form-item>
				<el-form-item prop="categoryName" label="分类名称">
					<el-input v-model="form2.typeName" placeholder="请输入分类名称" />
				</el-form-item>
				<el-form-item prop="categorySort" label="排序号">
					<el-input-number :controls="false" :precision="0" :step="1" :min="0" v-model="form2.typeSort" placeholder="请输入排序号" />
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="submitForm2">确 定</el-button>
					<el-button @click="cancel2">取 消</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="Dept">
import { listOne, listTwo, addOne, addTwo, updateOne, updateTwo, delOne, delTwo } from '@/api/product/product'
import { reactive } from 'vue'

const { proxy } = getCurrentInstance()

const dataList = ref([])
const open = ref(false)
const open2 = ref(false)
const refreshTable = ref(true)

const queryParams = reactive({
	categoryName: undefined,
	typeName: undefined
})
const nowRow = ref()
const loading = ref(false)
/** 查询大类 */
function getList() {
	loading.value = true
	listOne(queryParams).then((response) => {
		dataList.value = response.data.map((e) => {
			return { label: e.categoryName, id: '001' + e.categoryId, orderNum: e.categorySort, createTime: e.createTime, hasChildren: true, value: e }
		})
		loading.value = false
	})
}
const expanRow = (row, expanded) => {
	if(expanded){
		getList2(row)
	}
}
const getList2 = (row) => {
	listTwo({ ...queryParams, categoryId: row.value.categoryId }).then((response) => {
		row.children = response.data.map((e) => {
			return { label: e.typeName, id: '002' + e.typeId, orderNum: e.typeSort, createTime: e.createTime, hasChildren: false, value: e, parent:row }
		})
	})
}
const getTwo = (row) => {
	if (row.hasChildren) {
		proxy.$refs['tableRef'].toggleRowExpansion(row)
	}
}
/** 取消按钮 */
function cancel() {
	open.value = false
	reset()
}
/** 取消按钮 */
function cancel2() {
	open2.value = false
	reset()
}
const form1 = ref({
	categoryName: undefined,
	categorySort: 0
})
const rules1 = {
	categoryName: [{ required: true, message: '类名不能为空', trigger: 'blur' }],
	categorySort: [{ required: true, message: '排序号不能为空', trigger: 'blur' }]
}
const form2 = ref({
	typeName: undefined,
	typeSort: 0
})
const rules2 = {
	typeName: [{ required: true, message: '类名不能为空', trigger: 'blur' }],
	typeSort: [{ required: true, message: '排序号不能为空', trigger: 'blur' }]
}
/** 表单重置 */
function reset() {
	queryParams.categoryName = undefined
	queryParams.typeName = undefined
}
/** 搜索按钮操作 */
function handleQuery() {
	getList()
}
/** 重置按钮操作 */
function resetQuery() {
	proxy.resetForm('queryRef')
	handleQuery()
}
/** 新增按钮操作 */
function handleAdd(row) {
	if (row) {
		nowRow.value = row
		form2.value = {
			categoryId: row.value.categoryId,
			categoryName: row.value.categoryName,
			typeName: undefined,
			typeSort: 0
		}
		open2.value = true
	} else {
		form1.value = {
			categoryName: undefined,
			categorySort: 0
		}
		open.value = true
	}
}

/** 修改按钮操作 */
function handleUpdate(row) {
	if (row.hasChildren) {
		form1.value = row.value
		open.value = true
	} else {
		form2.value = row.value
		open2.value = true
	}
}
/** 提交按钮 */
function submitForm() {
	proxy.$refs['ref1'].validate((valid) => {
		if (valid) {
			if (form1.value.categoryId != undefined) {
				updateOne(form1.value).then((response) => {
					proxy.$modal.msgSuccess('修改成功')
					open.value = false
					getList()
				})
			} else {
				addOne(form1.value).then((response) => {
					proxy.$modal.msgSuccess('新增成功')
					open.value = false
					getList()
				})
			}
		}
	})
}
/** 提交按钮 */
function submitForm2() {
	proxy.$refs['ref2'].validate((valid) => {
		if (valid) {
			if (form2.value.typeId != undefined) {
				updateTwo(form2.value).then((response) => {
					proxy.$modal.msgSuccess('修改成功')
					open2.value = false
					getList2(nowRow.value)
				})
			} else {
				addTwo(form2.value).then((response) => {
					proxy.$modal.msgSuccess('新增成功')
					open2.value = false
					getList2(nowRow.value)
				})
			}
		}
	})
}
/** 删除按钮操作 */
function handleDelete(row) {
	proxy.$modal
		.confirm('是否确认删除的数据项?')
		.then(() => {
			if (row.hasChildren) {
				return delOne(row.value.categoryId)
			} else {
				return delTwo(row.value.typeId)
			}
		})
		.then(() => {
			if (row.hasChildren) {
				getList()
			} else {
				getList2(row.parent)
			}
			proxy.$modal.msgSuccess('删除成功')
		})
		.catch(() => {})
}

getList()
</script>
